<template>
	<view>
		<view class="content">
			<view class="contentTilte">支付金额</view>
			<view class="contentTotal">
				<text>￥</text>
				<text>0.01</text>
			</view>
		</view>
		<view class="nav">
			<view class="navItem">
				<view class="navItemLeft">
					<view class="iconfont icon-weixinzhifu"></view>
					<view class="navItemLeftText">
						<view>微信支付</view>
						<view class="tag">推荐使用微信支付</view>
					</view>
				</view>
				<view class="navItemRight" :class="{active: payment === 'wxpay'}" @click="selectPay('wxpay')">
					<view class="iconfont icon-duihao"></view>
				</view>
			</view>
			<view class="navItem">
				<view class="navItemLeft">
					<view class="iconfont icon-zhifubaozhifu"  style="color: #01aaef"></view>
					<view class="navItemLeftText">
						<view>支付宝支付</view>
					</view>
				</view>
				<view class="navItemRight" :class="{active: payment === 'alipay'}" @click="selectPay('alipay')">
					<view class="iconfont icon-duihao"></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="pay">
			确认支付
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
	import {  onLoad } from "@dcloudio/uni-app"
	import { order } from '@/api'
	import { getToken } from '@/utils/localStoreToken'
	let payment = ref('wxpay')
	function selectPay(payment1) {
		payment.value = payment1
		payPages.pay_type = payment1
	}
	let payPages = reactive({
		pay_type: 'wxpay',
		orderId: '',
		token: ''
	})
	async function pay(){
		// 发送订单请求
		let {data: {orderInfo, outTradeNo}}  = await  order.reqPayOrder(payPages, { platform: 'app-plus' })
		uni.requestPayment({
			// 支付方式
		    provider: payment.value,
		    orderInfo: orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
		    success: function (res) {
		       uni.$u.toast('支付成功')
			   
		    },
		    fail: function (err) {
				if(err.code === -100) {
					uni.$u.toast('用户取消支付')
				}
		    }
		});

		
	}
	 onLoad( async options => {
		// 获取订单
		payPages.orderId = JSON.parse(decodeURI(options.orderId))
		// 获取token
		payPages.token = getToken()
	})
</script>

<style lang="scss" scoped>
	.content{
		text-align: center;
		padding: 50rpx 0;
		line-height: 80rpx;
		.contentTilte {
			font-size: 50rpx;
			color: #bbb;
		}
		.contentTotal{
			font-size: 60rpx;
			color: #fdd100;
		}
	}
	.nav{
		padding: 50rpx;
		.navItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0; 
			border-bottom: 1px solid #ddd;
			margin-top: 50rpx;
			.navItemLeft{
				display: flex;
				align-items: center;
				.iconfont{
					margin-right: 30rpx;
					font-size: 70rpx;
					color: #36cb59;
				}
				.navItemLeftText{
					font-size: 35rpx;
					font-weight: 550;
					line-height: 50rpx;
					.tag{
						font-size: 25rpx;
						color: #aaa;
						font-weight: normal;
					}
				}
			}
			.navItemRight{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				color: #fff;
				line-height: 50rpx;
				text-align: center;
				background-color: #bbb;
				&.active{
					background-color: #fdd100;
					
				}
				.iconfont {
					font-size: 35rpx;
				}
			}
		}
		
	}
	.btn{
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		background-color: #fdd100;
		margin: 50rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		box-shadow: 0rpx 5rpx 5rpx pink;
		&:active{
			transform: translateY(5rpx);
			box-shadow: 0rpx 0rpx 5rpx pink;
		}
	}
</style>
